<template>
	<div class="situation">
		<div class="situation_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">领取情况<i class="el-icon-close"></i></div>
		</div>
		<div class="situation_bottom">
			<div class="situation_bottom_new">
				<div class="situation_bottom_new_goods">
					<div class="situation_bottom_new_goods_btn">
					</div>
					<div class="situation_bottom_new_goods_screening">
						<div class="situation_bottom_new_goods_screening_left">
							<i>使用状态</i>
							<el-select @change="handerChange" v-model="value" placeholder="请选择">
							    <el-option value="已使用">已使用</el-option>
							    <el-option value="未使用">未使用</el-option>
							  </el-select>
						</div>
						<div class="situation_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入优惠券信息查询"></el-input>
							<button><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="situation_bottom_table_box">
				<div class="situation_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>优惠券名称</th>
							<th>用户</th>
							<th>领取时间</th>
							<th>使用状态</th>
							<th>使用时间</th>
							<th>使用单号</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.name}}</td>
							<td>{{v.username}}</td>
							<td>{{v.redeem_time | dateformat('YYYY-MM-DD hh:mm:ss')}}</td>
							<td>{{v.is_use=='0'?'未使用':'已使用'}}</td>
							<td>{{v.use_time | dateformat('YYYY-MM-DD hh:mm:ss')}}</td>
							<td>{{v.order_code}}</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="8">当前数据空空如也</td></tr>
					</table>
				</div>
			</div>
		</div>
		<div class="situation_bottom_page">
			<div class="situation_bottom_page_left">
				<div class="situation_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
				</div>全选
				<button class="situation_bottom_page_left_btn" @click="selectDel">删除</button>
			</div>
			<div class="situation_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[100, 200, 300, 400]"
				      :page-size="pagesize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				    </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
		     return {
				input: '',
				checkAll:false,
				checkBoxAll:[],				// 选中的数据
				value: '',
				tableList:[],
				page:1,
				pagesize:100,
				total:0
			}
		},
		mounted(){
			console.log(this.$confirm);
			this._getSituation()
		},
		methods: {
			// 多选
			handlerCheckbox(i){
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index > -1){
						arr.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				}
			},
			// 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
				}else {
					this.checkBoxAll = [];
				}
				let res = this.checkBoxAll;
				for(let i=0;i<res.length;i++){
					for(let j=i+1;j<res.length;j++) {
						if(res[i] == res[j]) {
							res.splice(j,1);
							j--;
						}
					}
				}
			},
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
			},
			// 删除
			del(i) {
			    this.$confirm('确认删除该数据吗？', '确认信息', {
			        distinguishCancelAndClose: true,
			        confirmButtonText: '确定',
			        cancelButtonText: '取消'
			    })
			    .then(() => {
					this.delete(this.tableList,i);
					this.checkBoxAll = [];
			        this.$message({
			            type: 'info',
			            message: '删除成功'
			        });
			    })
			    .catch(action => {
			        this.$message({
			            type: 'info',
			            message: '取消删除'
			        })
			    });
			},
			// 选中删除
			selectDel(){
				let srt = this.checkBoxAll.length;
				this.tableList.splice(0,srt);
				this.checkBoxAll = [];
				if(this.tableList.length == 0) {
					this.checkAll = false;
				}
			},
			delete(arr,i){
				arr.splice(i,1);
			},
			// 筛选
			handerChange(e){
				console.log(e)
			},
			_getSituation(){
				this.$http.post('/api/admin/shop/store/couponUser',{store_id:'1',page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res);
					if(res.code==1){
						this.tableList=res.data.data?res.data.data:[];
						this.total=res.data.data?res.data.data.length:0;
					}
				})
			}
		},
	}
</script>

<style lang="less" scoped="scoped">
	@import 'situation.less';
</style>
